<template>
  <div class="equip-wrap-common">
    <div class="btn-group" style="padding: 16px 0 16px 0">
      <px-button type="primary" icon="ArrowLeft" @click="handleManage">返回</px-button>
      <div>
        <px-button v-if="!data.taskId && data.isPublishRange && data.publishStatus === 'PUBLISH'" type="primary" @click="AddCanlendar"
          >新建日程</px-button
        >
        <px-button v-if="data.taskId && data.isPublishRange && data.publishStatus === 'PUBLISH'" type="primary" @click="handleCanlendarDetail"
          >已建日程</px-button
        >
        <px-button v-if="data.isTop === 'NO' && data.publishStatus === 'PUBLISH'" @click="addTop">置顶到工作台</px-button>
        <px-button v-if="data.isTop === 'YES' && data.publishStatus === 'PUBLISH'" @click="cancelTop">取消置顶</px-button>
      </div>
    </div>
    <article class="article">
      <div class="article-header">
        <h3 class="article-title">{{ data?.title }}</h3>
        <div class="article-info">
          <div class="info-item">
            <span>创建人：</span><span>{{ data?.createByName }}</span>
          </div>
          <div class="info-item">
            <span>发布时间：</span><span>{{ data?.publishTime || "无" }}</span>
          </div>
          <div class="info-item">
            <span>公示到期时间：</span><span>{{ data?.expireTime || "无" }}</span>
          </div>
        </div>
      </div>
      <px-scrollbar class="article-scrollBar">
        <div class="editor-content-view w-e-text-container" v-html="data?.content" />
      </px-scrollbar>
    </article>
    <!-- 新增日程 -->
    <AddSchedule
      v-model:dialogVisible="addScheduleVisible"
      :day="targetDay"
      :desc="scheduleDetailData?.title"
      :customSubmit="customSubmit"
      @refresh="queryData"
    />
    <!-- 手动添加日程的详情 -->
    <ScheduleDetail v-model:dialogVisible="scheduleDetailVisible" @refresh="queryData" v-if="scheduleDetailData" :data="scheduleDetailData" />
  </div>
</template>
<script lang="ts" setup>
import { cancelTopAnnouncement, createTopAnnouncement, create_8, getAnnouncement, getTask } from "@/api/bench";
import { PxMessage } from "px-ui";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import AddSchedule from "../../task/canlendar/components/AddSchedule/index.vue";
import ScheduleDetail from "../../task/canlendar/components/ScheduleDetail/index.vue";

const router = useRouter();
const route = useRoute();
const data: any = ref({});
const handleManage = () => {
  const { pageType } = route.query;
  if (pageType === "1") {
    // 公告列表
    router.push("/all/bench/task/announcement");
  } else if (pageType === "2") {
    // 公告管理
    router.push("/all/bench/task/announcement/manage");
  } else if (pageType === "3") {
    // 工作台
    router.push("/all/bench/home");
  } else {
    router.back();
  }
};
const queryData = async () => {
  const { id: routeId, serialNumber } = route.query;
  const id = routeId ? Number(routeId) : undefined;
  data.value = await getAnnouncement({ id, serialNumber });
};
const scheduleDetailVisible = ref(false);
const scheduleDetailData = ref();
// 打开日程详情
const handleCanlendarDetail = async () => {
  scheduleDetailVisible.value = true;
  const taskData = await getTask({
    taskId: data.value.taskId
  });
  scheduleDetailData.value = taskData;
};
const addScheduleVisible = ref(false);
const targetDay = ref();
// 新增待办日程
const AddCanlendar = () => {
  targetDay.value = new Date();
  addScheduleVisible.value = true;
  scheduleDetailData.value = data.value;
};
// 自定义提交日程
const customSubmit = async params => {
  await create_8({ ...params, serialNumber: scheduleDetailData.value.serialNumber });
};
// 置顶
const addTop = async () => {
  const { id, serialNumber } = data.value;
  await createTopAnnouncement({ id, serialNumber });
  PxMessage.success("已置顶到个人工作台的公告中");
  queryData();
};
// 取消置顶
const cancelTop = async () => {
  const { id, serialNumber } = data.value;
  await cancelTopAnnouncement({ id, serialNumber });
  queryData();
};
onMounted(() => {
  queryData();
});
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
@import url("@wangeditor/editor/dist/css/style.css");
.btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.article {
  padding: 12px 40px 20px;
}
.article-scrollBar {
  height: calc(100vh - 320px);
}
.article-header {
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dfdfdf;
}

.article-title {
  height: 22px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #000;
  text-align: center;
}

.article-info {
  display: flex;
  justify-content: flex-end;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgb(0 0 0 / 50%);

  .info-item {
    margin-left: 56px;
  }
}

.editor-content-view {
  word-break: break-all;
}

/* ul ol 样式 */
:deep(ol) {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

:deep(ul) {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* table 样式 */
:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;

  td,
  th {
    min-width: 50px;
    height: 32px;
    padding: 3px 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  th {
    text-align: center;
    background-color: #f1f1f1;
    border-bottom: 2px solid #ccc;
  }
}

/* blockquote 样式 */
:deep(blockquote) {
  display: block;
  min-height: 24px;
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 100%;
  line-height: 1.4;
  background-color: #f1f1f1;
  border-left: 8px solid #d0e5f2;
}

/* code 样式 */
:deep(code) {
  display: inline-block;
  *display: inline;
  padding: 3px 5px;
  margin: 0 3px;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
}

:deep(pre) code {
  display: block;
}

:deep(a) {
  // text-decoration: underline;
  color: #5592e5;
}

/*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */
:deep(h5),
.h5 {
  font-size: 14px;
}

:deep(h4),
.h4 {
  font-size: 16px;
  font-weight: bold;
}

:deep(h3),
.h3 {
  font-size: 18px;
  font-weight: bold;
}

:deep(h2),
.h2 {
  font-size: 20px;
  font-weight: bold;
}

:deep(h1),
.h1 {
  font-size: 22px;
  font-weight: bold;
}

:deep(i) {
  font-style: italic;
}
</style>
